<template>
  <section class="course-task-item">
    <div class="header">
      <el-page-header @back="() => this.$router.back()" :content="content.title"/>
      <el-button type="primary" icon="el-icon-plus" @click="handleShowAddLesson">新增课时</el-button>
    </div>
    <el-table :data="lessons" v-loading="loading" element-loading-text="数据加载中...">
      <el-table-column prop="id" label="ID" width="230"></el-table-column>
      <el-table-column prop="theme" label="课时主题"></el-table-column>
      <el-table-column prop="duration" label="课时时长(分钟)" align="center" width="180"></el-table-column>
      <el-table-column prop="is_free" label="是否免费" align="center" width="200">
        <template slot-scope="scope">
          <i
            class="status status-success"
            title="免费"
            v-if="scope.row.is_free == '1'"
          ></i>
          <i
            class="status status-warning"
            title="付费"
            v-else-if="scope.row.is_free == '0'"
          ></i>
        </template>
      </el-table-column>
      <el-table-column prop="order_num" label="排序" align="center" width="180"></el-table-column>
      <el-table-column prop="status" label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button
            size="small"
            :type="scope.row.status == '0' ? 'danger' : (scope.row.status =='1'? 'warning' : 'success')"
            @click.stop="showStatus(scope.row)"
          >{{ statusMapping[scope.row.status] }}</el-button>
          <el-button size="small" @click.stop="handleEditLesson(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改课时-->
    <el-dialog class="add-dialog" title="课时信息" :visible.sync="showAddLesson">
      <el-form
        label-position="right"
        label-width="80px"
        ref="addLessonForm"
        :model="addLessonForm"
      >
        <el-form-item label="课时主题" prop="theme">
          <el-input v-model="addLessonForm.theme"></el-input>
        </el-form-item>
        <el-form-item label="课时时长(分钟)" prop="duration">
          <el-input v-model="addLessonForm.duration" type="number"></el-input>
        </el-form-item>
        <el-form-item label="是否免费" prop="is_free">
          <el-radio v-model="addLessonForm.is_free" :label="0">否</el-radio>
          <el-radio v-model="addLessonForm.is_free" :label="1">是</el-radio>
        </el-form-item>
        <el-form-item label="课时排序" prop="order_num">
          <el-input v-model="addLessonForm.order_num" type="number">
            <template slot="append">数字控制排序，数字越大越靠后</template>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAddLesson = false">取 消</el-button>
        <el-button type="primary" @click="handleAddLesson">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加或修改课时 -->

    <!-- 修改课时状态-对话框 -->
    <el-dialog class="toggle-dialog" title="提示" :visible.sync="showStatusForm" width="30%">
      <header class="toggle-header">
        <i class="el-icon-info"></i>
        <span>
          当前状态：{{
          statusForm.data && statusMapping[statusForm.data.status]
          }}
        </span>
      </header>

      <el-form label-position="right" label-width="110px" :model="statusForm">
        <el-form-item label="状态变更为：">
          <el-select v-model="statusForm.status" style="width: 100%">
            <el-option
              v-for="(item,index) in Object.keys(statusMapping)"
              :key="index"
              :label="statusMapping[item]"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="showStatusForm = false">取 消</el-button>
        <el-button type="primary" @click="updateStatus">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改章节状态 -->
  </section>
</template>

<script>
//引入axios
import { axios } from "../utils";
export default {
  name: 'CourseTaskItem',
  title: '课时配置',
  data () {
      //定义章节信息
    const addLessonForm = {
      course_id: 0,
      section_id: 0,
      theme: "",
      duration: 0,
      is_free: '0',
      order_num: 0
    };
     //定义章节状态信息
    const statusMapping = {
      0: "已隐藏",
      1: "未发布",
      2: "已发布"
    };
    const statusForm = {
      status: 0
    };
    return {
      content: {},
      lessons: [],
      loading: true,
      showAddLesson: false, //添加或修改课时
      showStatusForm:false,
      addLessonForm,
      statusMapping,
      statusForm
    }
  },
  created () {
    const {courseId,sectionId}=this.$route.params;
    this.$breadcrumbs = [
      { name: 'Courses', text: '课程管理' },
      { name: 'CourseTasks', params: { courseId }, text: '课程结构' },
      { text: '课时配置' }
    ]
    this.loadData(courseId, sectionId)
  },
  methods: {
    //方法1：加载课时数据
    loadData (courseId, sectionId) {
      this.loading = true
      axios
        .get("/courseContent", {
          params: {
            methodName: "findLessonBySectionId",
            section_id: sectionId
          }
        })
        .then(resp => {
          this.addLessonForm.course_id=courseId;
          this.addLessonForm.section_id=sectionId;
          //获取章节数据,保存到sections
          this.lessons = resp.data;
          console.log( this.lessons )
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
          this.$message.error("数据获取失败! ! !");
        });
    },
    //方法2: 显示添加课时表单,回显课时信息
    handleShowAddLesson() {
      //显示表单
      this.showAddLesson = true;
    },
    handleAddLesson(){
    axios
        .post("/courseContent", {
          methodName: "saveOrUpdateLesson",
          lesson: this.addLessonForm
        })
        .then(resp => {
          this.showAddLesson = false;
          //重新加载列表
          return this.loadData(this.addLessonForm.course_id,this.addLessonForm.section_id);
        })
        .catch(error => {
          this.loading = false;
          this.$message.error("操作执行失败! ! !");
        });
    },
    handleEditLesson(lesson){
      console.log(lesson)
      Object.assign(this.addLessonForm, lesson);
      this.showAddLesson = true;
    },
    showStatus(data){
      this.statusForm.id = data.id;
      this.statusForm.status = data.status.toString();
      this.statusForm.data = data;
      this.showStatusForm = true;
    },
    updateStatus(){
      axios
        .get("/courseContent", {
          params: {
            methodName: "updateLessonStatus",
            status: this.statusForm.status,
            id: this.statusForm.id
          }
        })
        .then(resp => {
          this.statusForm.data.status = this.statusForm.status;
          this.statusForm = {};
          this.showStatusForm = false;
        })
        .catch(error => {
          this.showStatusForm = false;
          this.$message.error("修改状态失败! ! !");
        });
    }
  }
}
</script>

<style lang="scss">
.course-task-item {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .el-table {
    margin-top: 20px;
  }
}
</style>
